<!DOCTYPE html>
<html>
<head>
    <title>薪水管理</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

    <!-- 所有的 css 资源 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">

    <!-- 所有的 js 资源 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.8.2/lib/index.js"></script>
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
    <script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
    <script src="../../static/kj/laydate/laydate.js"></script>
    <script src="../../static/sa.js"></script>

    <style type="text/css">

    </style>

</head>
<body>

<!-- 防止margin向下击穿 -->
<div style="margin-top: -1em;"><br></div>

<div id="vue-box" style="display: none;" :style="'display: block;'">

    <!-- 参数栏 -->
    <div class="c-panel">
        <div class="c-title">检索参数</div>
        <el-form ref="form">
            <div class="c-item">
                <label class="c-label">工号：</label>
                <el-input size="mini" v-model="p.job_id" placeholder="工号"></el-input>
                <label class="c-label">姓名：</label>
                <el-input size="mini" v-model="p.ename" placeholder="姓名"></el-input>
            </div>
            <div class="c-item" style="min-width: 0px;">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="findSalary">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh-right" size="mini" @click="SalaryAdd">更新工资</el-button>
            </div>
            <br/>

        </el-form>

    </div>

    <!-- 数据栏 -->
    <div class="c-panel">
        <div class="c-title">部门列表</div>
        <el-table class="data-table" :data="SalaryList" size="mini" style="width: 100%">

            <el-table-column label="工号" prop="job_id" sortable></el-table-column>
            <el-table-column label="姓名" prop="ename" sortable>
                <template slot-scope="scope" sortable>
                    <b>{{scope.row.ename}}</b>
                </template>
            </el-table-column>
            <el-table-column label="性别">
                <template slot-scope="scope">
                    <span v-if="scope.row.sex===1">{{scope.row.sex | sexFormat}}</span>
                    <span v-if="scope.row.sex===0">{{scope.row.sex | sexFormat}}</span>
                </template>
            </el-table-column>
            <el-table-column label="所属部门" prop="department" sortable>
                <template slot-scope="scope">
                    <b>{{scope.row.department}}</b>
                </template>
            </el-table-column>
            <el-table-column label="职位" prop="position" sortable></el-table-column>
            <el-table-column label="工资日期" prop="thismonth" sortable></el-table-column>

            <el-table-column label="基础工资" prop="baseMoney" sortable></el-table-column>
            <el-table-column label="考勤奖金" prop="checkMoney" sortable></el-table-column>
            <el-table-column label="最终薪资" prop="finalMoney" sortable></el-table-column>


        </el-table>
        <!--计算工资-->
        <el-dialog title="月薪计算" :visible.sync="addVisible" width="30%">
            <el-form name="temp" id="temp" ref="temp" :model="temp" label-width="100px">

                <el-form-item label="工号">
                    <el-input id="job_id" name="job_id" v-model="temp.job_id" maxlength="6" placeholder="输入工号"
                              show-word-limit onkeyup="this.value=this.value.replace(/\D/g,'')"/>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker id="time" name="time" v-model="temp.time" value-format="yyyy-MM-dd" type="date"
                                    placeholder="选择月份"></el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveAdd()">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 编辑 -->
        <el-dialog title="编辑工资" :visible.sync="editVisible" width="30%">
            <el-form name="form" id="form" ref="form" :model="form" label-width="100px">
                <el-form-item label="员工编号">
                    {{form.job_id}}
                </el-form-item>
                <el-form-item label="最终奖金">
                    <el-input id="finalMoney" name="finalMoney" v-model="form.finalMoney" maxlength="30"
                              show-word-limit/>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="editVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveEdit()">确 定</el-button>
          </span>
        </el-dialog>

    </div>

    <br><br><br><br><br><br><br><br><br>


</div>

<script>
    Vue.filter('sexFormat', function (val) {
        if (val === 1) {
            return '男'
        } else if (val === 0) {
            return '女'
        }
    })

    var app = new Vue({
        el: '#vue-box',
        data: {
            p: {	// 查询参数
                job_id: undefined,
                ename: ""

            },
            SalaryList: [
                {
                    job_id: 1,
                    ename: undefined,
                    department: undefined,
                    sex: 1,
                    position: undefined,
                    baseMoney: undefined,
                    checkMoney: undefined,
                    finalMoney: undefined,
                    thismonth: undefined
                }
            ],
            addVisible: false,
            editVisible: false,
            form: {
                finalMoney: undefined,
            },
            temp: {
                department: undefined,
                time: undefined,
            }
        },

        created: function () {
            this.getData();
        },

        methods: {
            handleEdit: function (row) {
                this.form = {
                    job_id: row.job_id,
                    ename: row.ename,
                    sex: row.sex,
                    department: row.department,
                    position: row.position,
                    baseMoney: row.baseMoney,
                    checkMoney: row.checkMoney,
                    finalMoney: row.finalMoney,
                }
                this.editVisible = true
            },

            // 保存编辑，更新薪资信息
            saveEdit: function () {
                var that = this
                if (form.finalMoney.value == "") {
                    layer.tips('请输入最终奖金', $("#finalMoney"));
                    form.finalMoney.focus();
                    return false;
                } else {
                    $.ajax({
                        url: "http://localhost:9900/updateSalary",
                        type: "post",
                        data: {
                            job_id: that.form.job_id,
                            finalMoney: that.form.finalMoney
                        },
                        success: function () {
                            layer.alert('修改成功', {
                                skin: 'layui-layer-molv'
                                , closeBtn: 0
                                , anim: 4
                            });

                            that.getData()
                        }
                    })
                    that.editVisible = false
                }
            },

            //刷新数据
            getData: function () {
                var that = this
                axios.post('http://localhost:9900/FindallSalary').then(function (res) {

                    //把从json获取的数据赋值给数
                    var data = res.data.lists
                    that.SalaryList = data
                    console.log("SalaryList--->" + that.SalaryList)

                }).catch(function () {
                    console.log('失败')
                })
            },

            deleteSalary: function (data) {
                var that = this
                layer.confirm('确定删除此信息？', {icon: 3, title: '提示'}, function (index) {
                    $.ajax({
                        type: 'POST',
                        url: 'http://localhost:9900/deleteSalary',
                        data: {job_id: data.job_id},
                        success: function () {
                            layer.alert('删除成功', {
                                skin: 'layui-layer-molv'
                                , closeBtn: 0
                                , anim: 4
                            });
                            that.getData()
                        },
                        error: function () {
                            layer.alert('删除失败', {
                                skin: 'layui-layer-molv'
                                , closeBtn: 0
                                , anim: 4
                            });
                        }
                    });
                });

            },
            //计算月薪
            SalaryAdd: function () {
                var that = this

                $.ajax({
                    url: "http://localhost:9900/AddSalary",
                    type: "post",
                    data: {
                        job_id: that.temp.job_id,
                        time: that.temp.time,
                    },
                    success: function () {
                        layer.alert('添加成功', {
                            skin: 'layui-layer-molv'
                            , closeBtn: 0
                            , anim: 4
                        });
                        that.getData()
                    }
                })
                that.addVisible = false

            },

            // 模糊查询
            findSalary: function () {

                var that = this

                $.ajax({
                    type: 'POST',
                    url: 'http://localhost:9900/QuarySalaryList',
                    data: {
                        job_id: that.p.job_id,
                        ename: that.p.ename,
                    },
                    success: function (res) {

                        layer.alert('查询成功', {
                            skin: 'layui-layer-molv'
                            , closeBtn: 0
                            , anim: 4
                        });
                        var data = res.lists
                        console.log(data)
                        that.SalaryList = data

                    },
                    error: function () {
                        layer.alert('查询失败', {
                            skin: 'layui-layer-molv'
                            , closeBtn: 0
                            , anim: 4
                        });
                    }
                });

            }
        }
    })
</script>

</body>
</html>
